<template>
  <view>
    <su-popup :show="show" type="top" round="20" backgroundColor="#F0F0F0" @close="closeMenuTools">
      <su-status-bar />
      <view class="tools-wrap ss-m-x-30 ss-m-b-16">
        <view class="title ss-m-b-34 ss-p-t-20">快捷菜单</view>
        <view class="container-list ss-flex ss-flex-wrap">
          <view class="list-item ss-m-b-24" v-for="item in list" :key="item.title">
            <view class="ss-flex-col ss-col-center">
              <button
                class="ss-reset-button list-image ss-flex ss-row-center ss-col-center"
                @tap="onClick(item)"
              >
                <image v-if="show" :src="sheep.$url.static(item.icon)" class="list-icon"></image>
              </button>
              <view class="list-title ss-m-t-20">{{ item.title }}</view>
            </view>
          </view>
        </view>
      </view>
    </su-popup>
    
    <!-- 平台管家弹框 -->
    <view class="custom-popup-overlay" v-if="showButlerPopup" @click="closeButlerPopup">
    <view class="custom-popup-content" @click.stop>
      <!-- 背景图 -->
      <view class="dialog-bg-image"></view>

      <!-- 标题 -->
      <view class="dialog-title">平台管家</view>

      <!-- 二维码区域 -->
      <view class="qr-code-section">
        <view class="qr-code-wrapper">
          <image src="https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/qrCode.png" mode="aspectFit"
            class="qr-code-img"></image>
        </view>
      </view>

      <!-- 提示文字 -->
      <view class="instruction-text">
        <text class="scan-text">扫描上方二维码</text>
        <text class="add-text">添加平台管家微信</text>
      </view>

      <!-- 确认按钮 -->
      <view class="confirm-button" @click="closeButlerPopup">
        <text class="btn-text">我知道了</text>
      </view>
    </view>
  </view>
  </view>
</template>

<script setup>
  import { reactive, computed, ref } from 'vue';
  import sheep from '@/sheep';
  import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';

  const show = computed(() => sheep.$store('modal').menu);
  const showButlerPopup = ref(false);

  function onClick(item) {
    closeMenuTools();
    if (item.url) {
      sheep.$router.go(item.url);
    } else if (item.title === '管家') {
      // 直接显示管家弹窗
      console.log('点击了管家按钮');
      showButlerPopup.value = true;
      console.log('管家弹窗状态设置为true');
    }
  }

  function closeButlerPopup() {
    console.log('关闭管家弹窗');
    showButlerPopup.value = false;
  }

  const list = [
    {
      url: '/pages/index/index',
      icon: '/assets/addons/shopro/uniapp/tools/home.png',
      title: '首页',
    },
    {
      url: '/subPackages/search/search',
      icon: '/assets/addons/shopro/uniapp/tools/search.png',
      title: '搜索',
    },
    {
      url: '/pages/index/user',
      icon: '/assets/addons/shopro/uniapp/tools/user.png',
      title: '个人中心',
    },
    {
      url: '/pages/index/cart',
      icon: '/assets/addons/shopro/uniapp/tools/cart.png',
      title: '购物车',
    },
    {
      url: '/pages/user/goods-log',
      icon: '/assets/addons/shopro/uniapp/tools/browse.png',
      title: '浏览记录',
    },
    // {
    //   url: '/pages/user/goods-collect',
    //   icon: '/assets/addons/shopro/uniapp/tools/collect.png',
    //   title: '我的收藏',
    // },
    // {
    //   url: '/pages/public/feedback',
    //   icon: '/assets/addons/shopro/uniapp/tools/feedback.png',
    //   title: '意见反馈',
    // },
    {
      // url: '/pages/chat/index',
      icon: '/assets/addons/shopro/uniapp/tools/service.png',
      title: '管家',
    },
  ];
</script>

<style lang="scss" scoped>
  .tools-wrap {
    // background: #F0F0F0;
    // box-shadow: 0px 0px 28rpx 7rpx rgba(0, 0, 0, 0.13);
    // opacity: 0.98;
    // border-radius: 0 0 20rpx 20rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
    }

    .list-item {
      width: calc(25vw - 20rpx);

      .list-image {
        width: 104rpx;
        height: 104rpx;
        border-radius: 52rpx;
        background: var(--ui-BG);

        .list-icon {
          width: 54rpx;
          height: 54rpx;
        }
      }

      .list-title {
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
      }
    }
  }

  .uni-popup {
    top: 0 !important;
  }

  :deep(.button-hover) {
    background: #fafafa !important;
  }

  /* 平台管家弹框样式 */
  .custom-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
  }

  .custom-popup-content {
    width: 700rpx;
    height: 900rpx;
    background: url('https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/qrCodeBg.png') no-repeat center center;
    background-size: contain;
    z-index: 1;
    border-radius: 24rpx;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    animation: slideIn 0.3s ease;
  }

  .dialog-title {
    position: relative;
    z-index: 2;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 30rpx;
    color: #333333;
    margin-top: 120rpx;
    text-align: center;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
    letter-spacing: 2rpx;
  }

  .qr-code-section {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .qr-code-wrapper {
    border-radius: 20rpx;
    padding: 20rpx;
    display: inline-block;
    backdrop-filter: blur(10rpx);
  }

  .qr-code-img {
    width: 360rpx;
    height: 360rpx;
    display: block;
    border-radius: 12rpx;
  }

  .instruction-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 30rpx;
  }

  .scan-text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    text-align: center;
    text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
    letter-spacing: 1rpx;
  }

  .add-text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
  }

  .confirm-button {
    position: relative;
    z-index: 2;
    width: 500rpx;
    height: 90rpx;
    background: linear-gradient(135deg, #FF7C00 0%, #FF9500 100%);
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 12rpx 24rpx rgba(255, 124, 0, 0.3);
    transition: all 0.2s ease;
    margin-bottom: 20rpx;
  }

  .confirm-button:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, #e67000 0%, #e68500 100%);
    box-shadow: 0 8rpx 20rpx rgba(255, 124, 0, 0.4);
  }

  .btn-text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 26rpx;
    color: #FFFFFF;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
    letter-spacing: 2rpx;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideIn {
    from {
      transform: scale(0.8);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
</style>
